<template>
    <div class="left-bot">
        <div class="text">主题页列表</div>
        <div>
            <el-table :data="tableData" height="390" style="width: 100%;">
                <el-table-column prop="date" label="名称" />
                <el-table-column prop="name" label="主题页ID" />
                <el-table-column prop="address" label="类型" />
                <el-table-column prop="commodities" label="商品数" />
                <el-table-column prop="Total" label="总订单数" />
                <el-table-column prop="gmv" label="今日GMV" />
                <el-table-column prop="Status" label="状态" />
                <el-table-column label="操作">
                    <el-icon color="#2F60C2" size="20" style="margin-right: 10px;">
                        <Edit />
                    </el-icon>
                    <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled"
                        icon-color="#626AEF" title="确定删除吗？" @confirm="confirmEvent" @cancel="cancelEvent">
                        <template #reference>
                            <el-icon color="#FF5722" size="20">
                                <DeleteFilled />
                            </el-icon>
                        </template>
                    </el-popconfirm>

                </el-table-column>


            </el-table>
        </div>
    </div>

</template>

<script setup lang="ts">
import { InfoFilled } from '@element-plus/icons-vue'

//数据模拟
const tableData = [
    {
        id: '1',
        date: '限时秒杀',
        name: '9id',
        address: '内部链接',
        commodities: 99,
        Total: '425',
        gmv: '1769',
        Status: '已下线',
    },
    {
        id: '2',
        date: '限时秒杀',
        name: '3id',
        address: '内部链接',
        commodities: 56,
        Total: '976',
        gmv: '3675',
        Status: '已上线',
    },
    {
        id: '3',
        date: '限时秒杀',
        name: '7id',
        address: '外部链接',
        commodities: 60,
        Total: '700',
        gmv: '3346',
        Status: '已上线',
    },
    {
        id: '4',
        date: '限时秒杀',
        name: '11id',
        address: '内部链接',
        commodities: 56,
        Total: '976',
        gmv: '3675',
        Status: '已上线',
    },
    {
        id: '5',
        date: '限时秒杀',
        name: '15id',
        address: '内部链接',
        commodities: 70,
        Total: '500',
        gmv: '3675',
        Status: '已下线',
    },
    {
        id: '6',
        date: '限时秒杀',
        name: '4id',
        address: '内部链接',
        commodities: 80,
        Total: '376',
        gmv: '6675',
        Status: '已上线',
    },
    {
        id: '7',
        date: '限时秒杀',
        name: '7id',
        address: '外部链接',
        commodities: 14,
        Total: '576',
        gmv: '3000',
        Status: '已下线',
    },
    {
        id: '8',
        date: '限时秒杀',
        name: '7716',
        address: '内部链接',
        commodities: 30,
        Total: '076',
        gmv: '3705',
        Status: '已上线',
    },
    {
        id: '9',
        date: '限时秒杀',
        name: '1135',
        address: '外部链接',
        commodities: 90,
        Total: '700',
        gmv: '2760',
        Status: '已上线',
    },
    {
        id: '10',
        date: '限时秒杀',
        name: '4453',
        address: '外部链接',
        commodities: 28,
        Total: '666',
        gmv: '4563',
        Status: '已下线',
    },
    {
        id: '11',
        date: '限时秒杀',
        name: '8865',
        address: '内部链接',
        commodities: 20,
        Total: '556',
        gmv: '7632',
        Status: '已下线',
    },


]
//删除按钮
const confirmEvent = () => {

}
const cancelEvent = () => {
    console.log('cancel!')
}
</script>

<style scoped lang="scss">
.left-bot {
    width: 100%;
    height: 410px;
    background: #fff;
    margin-top: 10px;
    border-radius: 8px;

    .text {
        padding-top: 8px;
        margin-left: 10px;
        font-weight: bold;
        font-size: 14px;
    }
}
</style>